export default {
  name: 'Roles',
  data () {
    return {
      // 角色列表
      rolesList: [],
      // 添加角色对话框是否显示
      addRolesDialog: false,
      addRolesInfo: {},
      // 添加角色的表单验证
      addRolesRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ]
      },
      // 编辑角色对话框是否显示
      editRolesInfoDialog: false,
      // 编辑角色信息
      aditRolesInfo: {
        roleName: '',
        roleDesc: '',
        id: 0
      },
      // 分配权限对话框是否显示
      editRightsDialog: false,
      // 权限列表 树状
      rightsList: [
        {
          id: 5,
          title: '选项1',
          children: [
            {
              id: 50,
              title: '选项1-1'
            },
            {
              id: 50,
              title: '选项1-1'
            },
            {
              id: 50,
              title: '选项1-1'
            }
          ]
        },
        {
          id: 6,
          title: '选项2',
          children: []
        }
      ],
      // 权限列表中选中的 数组
      checkedRightsList: [5],
      // 权限树的信息
      rightsTreeInfo: {
        label: 'authName',
        children: 'children'
      },
      // 默认展开的数组
      expendRightsList: [],
      rowId: 0
    }
  },
  created () {
    // 请求角色列表
    this.getRolesList()
    // 请求所有权限列表
    this.getRightsList()
  },
  methods: {
    async getRolesList () {
      const { data } = await this.$get('roles')
      this.rolesList = data
    },
    // 关闭添加角色对话框
    closeAddRolesDialog () {
      // 重置表单,重置验证规则
      this.$refs.addRoles.resetFields()
      // 重置对象, 重置不带验证表单的
      this.addRolesInfo = {}
    },
    // 确认添加角色
    addRolesHandler () {
      // 发送请求进行添加操作 验证你表单
      this.$refs.addRoles.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则完整填写表单'
          })
          return
        }
        const { meta } = await this.$post('roles', this.addRolesInfo)
        if (meta.status === 201) {
          this.$message({
            type: 'success',
            message: '添加角色成功'
          })
          // 重新渲染角色列表
          this.getRolesList()
          // 关闭当前对话框
          this.addRolesDialog = false
        }
      })
    },
    // 删除角色
    deleteRolesHandler (id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        const { meta } = await this.$delete(`roles/${id}`)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 重新请求角色列表
          this.getRolesList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑角色信息
    showEditInfoDialog (val) {
      this.aditRolesInfo.id = val.id
      this.aditRolesInfo.roleName = val.roleName
      this.aditRolesInfo.roleDesc = val.roleDesc
      // 展开对话框
      this.editRolesInfoDialog = true
    },
    // 确认编辑按钮事件
    async editRolesInfoHandler () {
      // 发送编辑角色信息请求
      const { meta } = await this.$put(`roles/${this.aditRolesInfo.id}`, this.aditRolesInfo)
      // 判断发出提示
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.getRolesList()
        this.editRolesInfoDialog = false
      }
    },
    async getRightsList () {
      const { data } = await this.$get('rights/tree')
      this.rightsList = data
      // 让所有项都展开
      data.forEach(item => {
        this.expendRightsList.push(item.id)
        // 遍历二级菜单
        item.children.forEach(t => {
          this.expendRightsList.push(t.id)
        })
      })
    },
    // 展开分配渲染对话框
    showEditRightsHandler (val, id) {
      this.roleId = id
      val.forEach(item => {
        if (!item.children) return
        // 遍历二级权限
        item.children.forEach(t => {
          if (!t.children) return
          // 遍历三级权限
          t.children.forEach(t2 => {
            this.checkedRightsList.push(t2.id)
          })
        })
      })
      this.editRightsDialog = true
    },
    closeRightsDialog () {
      this.checkedRightsList = []
    },
    // 确认编辑权限事件
    async editRightsHandler () {
      const checkedIds = this.$refs.rightsTree.getCheckedKeys()
      const halfCheckedIds = this.$refs.rightsTree.getHalfCheckedKeys()
      // 把参数穿给后端
      const rids = [...checkedIds, ...halfCheckedIds] + ''
      // 发送请求
      const { meta } = await this.$post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '分配权限成功'
        })

        // 从新请求角色列表
        this.getRolesList()

        // 关闭对话框
        this.editRightsDialog = false
      }
    }
  }
}
